<template>
 <div>
 <div align="center">
    <form name="form1" action="" method="" target="">
      <div style="display:none;">&nbsp;</div>
      <table class="content_report" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <td align="center">
              <br>
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td width="160" class="reportSmallNormal">&nbsp;</td>
                    <td align="center" style="font-family:Arial;font-size:12pt;font-weight:bold;">
                      <div>全年營業總表</div>
                    </td>
                    <td width="200" class="reportSmallNormal" align="right">
                      <div>列印日期: {{ time }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
          <tr>
            <td align="center">
              <table border="0" cellpadding="2" cellspacing="0">
                <tbody>
                  <tr>
                    <td class="reportSmallNormal" align="left" valign="top">分校:</td>
                    <td class="reportSmallNormal" align="left" valign="top">
                      {{ obj.school_name ? obj.school_name : '所有'}}
                    </td>
                    <td class="reportSmallNormal" align="left" valign="top">日期:</td>
                        <td class="reportSmallNormal" align="left" valign="top">
                          {{ obj.time && obj.time.length > 1 ?
                              `${obj.time[0]}至${obj.time[1]}` : `所有`
                          }}
                        </td>
                  </tr>
                </tbody>
              </table>
              <br>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <table width="1000" border="0" cellpadding="2" cellspacing="0" >
                <colgroup>
                  <col width="300"><!-- 學生編號 -->
                  <col width="300"><!-- 學生名稱 -->
                  <col width="300"><!-- 首次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                  <col width="300"><!-- 再次消費金額 -->
                </colgroup>
                <thead>
                  <tr>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">月份</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">課程銷售</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">課程退款</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">產品銷售</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">產品退款</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">產品組合銷售</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">產品組合退款</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">實際營業額</td>
                    <td class="reportSmallNormal" align="center" style="border-bottom:1px solid Black;">新增會員</td>
                  </tr>
                </thead>
                <tbody >
                  <tr v-for="(item, index) in list" :key="index" v-show="item.month">
                    <td class="reportSmallNormal" align="center" valign="top">{{item.month}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.courseSale}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.courseRefund}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.productSale}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.productRefund}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.productComposeSale}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.productComposeRefund}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.total}}</td>
                    <td class="reportSmallNormal" align="center" valign="top">{{item.newStudent}}</td>
                  </tr>
                     <tr>
                    <td class="reportSmallNormal" align="center" valign="bottom">總計:</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.courseSaleTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.courseRefundTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.productSaleTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.productRefundTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.productComposeSaleTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.productComposeRefundTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.turnoverTotal}}</td>
                    <td class="reportSmallNormal" align="center" valign="bottom" style="border-top:1px solid black; border-bottom:1px solid black;">{{count.newStudentTotal}}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td align="center">
              <br>
              <span class="reportSmallNormal">*** 報表完 ***</span>
              </td>
          </tr>
          <tr>
            <td align="center">&nbsp;</td>
          </tr>
  
        </tbody>
      </table>
    </form>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {getTime} from '@/common/function.js'
const time = ref('')


const props = defineProps({
    list:Object,
    count:Object,
    obj:Object,
})

onMounted(() => {
    time.value = `${getTime().nowDate} ${getTime().nowTime}`
})
</script>

<style scoped lang='less'>
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

.reportSmallBoldNormal {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
}

.reportSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
</style>